import { defineStore } from 'pinia'

/**
 * 与系统主题相关的交互函数
 * @param {string} key - 交互类型标识符
 * @param {*} value - 传递的值或回调函数
 * @returns {*} - 根据不同的交互类型返回不同的结果
 */
const systemTheme = (key, value) => {
  if (key === 'change') {
    return window.electron.ipcRenderer.on('app-theme-change', (_, ...args) =>
      value(...args),
    )
  }
  return window.electron.ipcRenderer.invoke(`app-theme-${key}`, value)
}

/**
 * 定义一个用于管理应用主题的Store
 */
export const useThemeStore = defineStore({
  id: 'app-theme',
  state() {
    const themeValue = window.appStore.get('common.theme') || 'system'
    return {
      value: themeValue,
      isDark: false,
    }
  },
  actions: {
    system: systemTheme,

    /**
     * 初始化主题设置
     */
    init() {
      this.update(this.value)
    },

    /**
     * 更新主题设置
     * @param {string} value - 新的主题值
     */
    async update(value) {
      this.value = value

      this.isDark = await systemTheme('isDark')

      await systemTheme('update', value)

      this.isDark = await systemTheme('isDark')

      await this.updateHtml(value)
    },

    /**
     * 更新HTML元素的主题类
     * @param {string} value - 当前的主题值
     */
    async updateHtml(value) {
      const updateClass = (theme) => {
        const htmlEl = document.querySelector('html')
        if (theme === 'dark') {
          htmlEl.classList.add('dark')
          return
        }

        htmlEl.classList.remove('dark')
      }

      if (value === 'system') {
        updateClass(this.isDark ? 'dark' : 'light')
        return
      }

      updateClass(value)
    },
  },
})

/**
 * 监听系统主题色变化
 * 当系统主题色发生变化时，更新应用的主题设置
 */
systemTheme('change', async ({ isDark, value }) => {
  if (value !== 'system') {
    return
  }

  const themeStore = useThemeStore()

  if (themeStore.isDark === isDark) {
    return
  }

  themeStore.update(value)
})
